<!DOCTYPE html><html><head>
      <title>README</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:///c:\Users\EDZ\.vscode\extensions\shd101wyy.markdown-preview-enhanced-0.6.3\node_modules\@shd101wyy\mume\dependencies\katex\katex.min.css">
      
      
      
      
      
      
      
      
      
      <style>
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview  ">
      <h1 class="mume-header" id="jquery%E7%9A%84%E7%BB%BC%E5%90%88%E5%BA%94%E7%94%A8">JQuery&#x7684;&#x7EFC;&#x5408;&#x5E94;&#x7528;</h1>

<h2 class="mume-header" id="%E6%96%B0%E9%97%BB%E8%B5%84%E8%AE%AF%E5%B0%8F%E7%A8%8B%E5%BA%8F">&#x65B0;&#x95FB;&#x8D44;&#x8BAF;&#x5C0F;&#x7A0B;&#x5E8F;</h2>

<h3 class="mume-header" id="1-%E9%9C%80%E6%B1%82%E5%88%86%E6%9E%90">1&#x3001;&#x9700;&#x6C42;&#x5206;&#x6790;</h3>

<blockquote>
<p>&#x5B9E;&#x73B0;&#x6548;&#x679C;</p>
</blockquote>
<p><img src="des.png" alt="&#x6548;&#x679C;&#x56FE;"></p>
<h4 class="mume-header" id="%E5%88%86%E6%9E%90%E9%9C%80%E6%B1%82">&#x5206;&#x6790;&#x9700;&#x6C42;</h4>

<h5 class="mume-header" id="%E6%95%B4%E4%B8%AA%E9%A1%B5%E9%9D%A2%E5%8F%AF%E5%88%86%E6%88%90%E4%B8%8A%E4%B8%AD%E4%B8%8B%E4%B8%89%E9%83%A8%E5%88%86">&#x6574;&#x4E2A;&#x9875;&#x9762;&#x53EF;&#x5206;&#x6210;&#x4E0A;&#x4E2D;&#x4E0B;&#x4E09;&#x90E8;&#x5206;</h5>

<ul>
<li>&#x5934;&#x90E8;&#x6807;&#x9898;&#x680F;&#xFF0C;&#x663E;&#x793A;&#x65B0;&#x95FB;&#x8D44;&#x8BAF;</li>
<li>&#x4E2D;&#x95F4;Tab&#x680F;&#xFF0C;&#x5B9E;&#x73B0;&#x65B0;&#x95FB;&#x5206;&#x7C7B;&#x7684;&#x5207;&#x6362;&#x529F;&#x80FD;</li>
<li>&#x6700;&#x540E;&#x5C31;&#x662F;&#x5185;&#x5BB9;&#x90E8;&#x5206;&#xFF0C;&#x663E;&#x793A;&#x65B0;&#x95FB;&#x5217;&#x8868;&#x7684;&#x529F;&#x80FD;</li>
</ul>
<h5 class="mume-header" id="tab%E6%A0%8F%E5%88%86%E6%9E%90">Tab&#x680F;&#x5206;&#x6790;</h5>

<ul>
<li>Tab&#x680F;&#x5206;&#x4E3A;&#x4E24;&#x79CD;&#x6837;&#x5F0F;&#xFF0C;&#x4E00;&#x79CD;&#x662F;<strong>&#x672A;&#x9009;&#x4E2D;&#x6837;&#x5F0F;</strong>&#xFF0C;&#x4E00;&#x79CD;&#x662F;<strong>&#x9009;&#x4E2D;&#x6837;&#x5F0F;</strong></li>
<li>&#x70B9;&#x51FB;Tab&#x7684;&#x65F6;&#x5019;&#x9700;&#x8981;&#x628A;&#x70B9;&#x51FB;&#x7684;&#x5F53;&#x524D;Tab&#x6DFB;&#x52A0;&#x9009;&#x4E2D;&#x6837;&#x5F0F;&#xFF0C;&#x5176;&#x4ED6;&#x53BB;&#x9664;&#x9009;&#x4E2D;&#x6837;&#x5F0F;(<strong>&#x6392;&#x4ED6;&#x601D;&#x60F3;</strong>)</li>
<li>&#x6700;&#x540E;&#x5B9E;&#x73B0;&#x65B0;&#x95FB;&#x5206;&#x7C7B;&#x7684;&#x5207;&#x6362;&#x529F;&#x80FD;</li>
</ul>
<h5 class="mume-header" id="%E6%96%B0%E9%97%BB%E5%86%85%E5%AE%B9%E5%88%86%E6%9E%90">&#x65B0;&#x95FB;&#x5185;&#x5BB9;&#x5206;&#x6790;</h5>

<ul>
<li>&#x9996;&#x5148;&#x662F;&#x9700;&#x8981;&#x4E00;&#x4E2A;&#x5BB9;&#x5668;&#x6765;&#x627F;&#x8F7D;&#x591A;&#x4E2A;&#x65B0;&#x95FB;&#x7684;&#x5185;&#x5BB9;&#x5217;&#x8868;&#xFF0C;&#x65B0;&#x95FB;&#x7684;&#x5185;&#x5BB9;&#x4E3A;&#x7ED3;&#x6784;&#x4E00;&#x6837;&#xFF0C;&#x6570;&#x636E;&#x4E0D;&#x4E00;&#x6837;&#x7684;html&#x7ED3;&#x6784;</li>
<li>&#x65B0;&#x95FB;&#x5185;&#x5BB9;&#x5206;&#x4E3A;&#x4E24;&#x90E8;&#x5206;<strong>&#x5DE6;&#x8FB9;&#x56FE;&#x7247;</strong>&#x548C;<strong>&#x53F3;&#x8FB9;&#x6587;&#x672C;</strong>&#xFF0C;&#x800C;&#x53F3;&#x8FB9;&#x6587;&#x672C;&#x5206;&#x4E3A;<strong>&#x4E0A;&#x9762;&#x7684;&#x65B0;&#x95FB;&#x6807;&#x9898;</strong>&#x548C;<strong>&#x4E0B;&#x9762;&#x7684;&#x6765;&#x6E90;&#x548C;&#x65F6;&#x95F4;</strong></li>
<li>&#x65B0;&#x95FB;&#x6570;&#x636E;&#x7684;&#x6765;&#x6E90;&#x9700;&#x8981;&#x6839;&#x636E;<strong>&#x6570;&#x636E;&#x63A5;&#x53E3;</strong>&#x8FDB;&#x884C;&#x8C03;&#x7528;&#x83B7;&#x53D6;</li>
</ul>
<h4 class="mume-header" id="%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3">&#x63A5;&#x53E3;&#x6587;&#x6863;</h4>

<ul>
<li><a href="https://www.tianapi.com/apiview/99">&#x5934;&#x6761;&#x65B0;&#x95FB;&#x63A5;&#x53E3;</a></li>
<li><a href="https://www.tianapi.com/apiview/6">&#x5A31;&#x4E50;&#x65B0;&#x95FB;&#x63A5;&#x53E3;</a></li>
<li><a href="https://www.tianapi.com/apiview/8">NBA&#x65B0;&#x95FB;&#x63A5;&#x53E3;</a></li>
<li><a href="https://www.tianapi.com/apiview/217">&#x7535;&#x7ADE;&#x8D44;&#x8BAF;&#x63A5;&#x53E3;</a></li>
</ul>
<h4 class="mume-header" id="%E4%BB%BB%E5%8A%A1%E8%A6%81%E6%B1%82">&#x4EFB;&#x52A1;&#x8981;&#x6C42;</h4>

<h5 class="mume-header" id="%E4%B8%80-%E6%A0%B9%E6%8D%AE%E4%B8%8A%E8%BF%B0%E6%95%88%E6%9E%9C%E5%9B%BE%E7%BC%96%E5%86%99html%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E5%91%88%E7%8E%B0%E5%88%86%E4%B8%BA%E4%BB%A5%E4%B8%8B%E5%AD%90%E9%A2%98%E7%9B%AE">&#x4E00;&#x3001;&#x6839;&#x636E;&#x4E0A;&#x8FF0;&#x6548;&#x679C;&#x56FE;&#x7F16;&#x5199;html&#x4EE3;&#x7801;&#x5B9E;&#x73B0;&#x9875;&#x9762;&#x5448;&#x73B0;&#xFF0C;&#x5206;&#x4E3A;&#x4EE5;&#x4E0B;&#x5B50;&#x9898;&#x76EE;</h5>

<blockquote>
<p>&#x8FD9;&#x662F;&#x4E0A;&#x5B66;&#x671F;html5&#x7F51;&#x9875;&#x8BBE;&#x8BA1;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x4E0D;&#x60F3;&#x5199;&#x7684;&#x53EF;&#x4EE5;<strong>&#x8DF3;&#x8FC7;</strong>&#xFF0C;&#x7528;&#x5199;&#x597D;&#x7684;html&#x3002;&#x4F46;&#x4F5C;&#x4E3A;&#x4E00;&#x4E2A;&#x524D;&#x7AEF;&#x5FC5;&#x9700;&#x4F1A;&#x5199;</p>
</blockquote>
<ol>
<li>&#x642D;&#x5EFA;&#x57FA;&#x672C;&#x9875;&#x9762;&#x67B6;&#x6784;</li>
<li>&#x5F15;&#x5165;css&#x6587;&#x4EF6;</li>
<li>&#x5F15;&#x5165;js&#xFF0C;jq&#x5E93;&#x6587;&#x4EF6;</li>
<li>&#x7F16;&#x5199;html&#x4EE3;&#x7801;&#xFF0C;&#x5B9E;&#x73B0;&#x9875;&#x9762;&#x5448;&#x73B0;</li>
</ol>
<h5 class="mume-header" id="%E4%BA%8C-%E6%A0%B9%E6%8D%AE%E4%B8%8A%E8%BF%B0%E9%9C%80%E6%B1%82%E5%88%86%E6%9E%90%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E5%8A%9F%E8%83%BD%E5%88%86%E4%B8%BA%E4%BB%A5%E4%B8%8B%E5%AD%90%E9%A2%98%E7%9B%AE">&#x4E8C;&#x3001;&#x6839;&#x636E;&#x4E0A;&#x8FF0;&#x9700;&#x6C42;&#x5206;&#x6790;&#xFF0C;&#x5B9E;&#x73B0;&#x9875;&#x9762;&#x529F;&#x80FD;&#xFF0C;&#x5206;&#x4E3A;&#x4EE5;&#x4E0B;&#x5B50;&#x9898;&#x76EE;</h5>

<ol>
<li>&#x5B8C;&#x6210;Tab&#x680F;&#x9009;&#x4E2D;&#x6548;&#x679C;&#x5207;&#x6362;&#x529F;&#x80FD;</li>
<li>&#x5B9E;&#x73B0;&#x65B0;&#x95FB;&#x6570;&#x636E;&#x7684;&#x8BF7;&#x6C42;&#x529F;&#x80FD;</li>
<li>&#x5B9E;&#x73B0;&#x628A;&#x63A5;&#x53E3;&#x8FD4;&#x56DE;&#x6765;&#x7684;&#x65B0;&#x95FB;&#x6570;&#x636E;&#x6E32;&#x67D3;&#x81F3;&#x9875;&#x9762;&#x4E0A;&#x7684;&#x6548;&#x679C;</li>
<li>&#x5B9E;&#x73B0;&#x70B9;&#x51FB;&#x65B0;&#x95FB;&#x5185;&#x5BB9;&#x8DF3;&#x8F6C;&#x5230;&#x65B0;&#x95FB;&#x94FE;&#x63A5;&#x7684;&#x529F;&#x80FD;</li>
<li>&#x5B9E;&#x73B0;&#x65B0;&#x95FB;&#x6EDA;&#x5230;&#x5230;&#x6700;&#x540E;&#x4E00;&#x6761;&#x7684;&#x65F6;&#x5019;&#x52A0;&#x8F7D;&#x4E0B;&#x4E00;&#x9875;&#x65B0;&#x95FB;&#x7684;&#x529F;&#x80FD;</li>
<li>&#x5B9E;&#x73B0;&#x70B9;&#x51FB;Tab&#x5207;&#x6362;&#x4E0D;&#x540C;&#x65B0;&#x95FB;&#x5206;&#x7C7B;&#x7684;&#x529F;&#x80FD;</li>
</ol>
<h3 class="mume-header" id="2-%E7%A8%8B%E5%BA%8F%E7%BC%96%E5%86%99">2&#x3001;&#x7A0B;&#x5E8F;&#x7F16;&#x5199;</h3>

<h4 class="mume-header" id="21-%E9%A1%B5%E9%9D%A2%E4%BB%A3%E7%A0%81">2.1 &#x9875;&#x9762;&#x4EE3;&#x7801;</h4>

<p>index.html&#x6587;&#x4EF6;</p>
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>&#x65B0;&#x95FB;&#x8D44;&#x8BAF;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- &#x6837;&#x5F0F;&#x6587;&#x4EF6;&#x5F15;&#x5165; --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- &#x4E0A;&#x90E8;&#x5206;-&#x9875;&#x9762;&#x6807;&#x9898; --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x65B0;&#x95FB;&#x8D44;&#x8BAF;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- &#x4E2D;&#x95F4;&#x90E8;&#x5206;-Tab&#x5207;&#x6362;&#x680F;&#x76EE; --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tab<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>current<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>&#x5934;&#x6761;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x5A31;&#x4E50;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>&#x7535;&#x7ADE;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>NBA<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- &#x5185;&#x5BB9;&#x90E8;&#x5206; --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- &#x65B0;&#x95FB;&#x5185;&#x5BB9;  --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>card<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token comment">&lt;!-- &#x5DE6;&#x8FB9;&#x56FE;&#x7247; --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>des.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token comment">&lt;!-- &#x53F3;&#x8FB9;&#x6587;&#x672C; --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token comment">&lt;!-- &#x4E0A;&#x9762;&#x6807;&#x9898; --&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>&#x65B0;&#x51A0;&#x836F;&#x7269;&#x6982;&#x5FF5;&#x9707;&#x8361;&#x8D70;&#x9AD8;&#xFF0C;&#x62D3;&#x65B0;&#x836F;&#x4E1A;&#x6DA8;&#x8D85;8%&#xFF0C;&#x534E;&#x6DA6;&#x53CC;&#x9E64;&#x3001;&#x7CBE;&#x534E;&#x5236;&#x836F;&#x6DA8;&#x8D85;5%&#xFF0C;&#x8D5B;&#x4F26;&#x751F;&#x7269;&#x3001;&#x8BDA;&#x8FBE;&#x836F;&#x4E1A;&#x7B49;&#x8DDF;&#x6DA8; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
                <span class="token comment">&lt;!-- &#x4E0B;&#x9762;&#x6765;&#x6E90;&#x548C;&#x65F6;&#x95F4; --&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sourse-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>&#x6765;&#x6E90;&#xFF1A;&#x4ECA;&#x65E5;&#x5934;&#x6761;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>2022-05-25 14&#xFF1A;02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>card<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>des.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>&#x65B0;&#x51A0;&#x836F;&#x7269;&#x6982;&#x5FF5;&#x9707;&#x8361;&#x8D70;&#x9AD8;&#xFF0C;&#x62D3;&#x65B0;&#x836F;&#x4E1A;&#x6DA8;&#x8D85;8%&#xFF0C;&#x534E;&#x6DA6;&#x53CC;&#x9E64;&#x3001;&#x7CBE;&#x534E;&#x5236;&#x836F;&#x6DA8;&#x8D85;5%&#xFF0C;&#x8D5B;&#x4F26;&#x751F;&#x7269;&#x3001;&#x8BDA;&#x8FBE;&#x836F;&#x4E1A;&#x7B49;&#x8DDF;&#x6DA8; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sourse-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>&#x6765;&#x6E90;&#xFF1A;&#x4ECA;&#x65E5;&#x5934;&#x6761;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>2022-05-25 14&#xFF1A;02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>card<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>des.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h5</span><span class="token punctuation">&gt;</span></span>&#x65B0;&#x51A0;&#x836F;&#x7269;&#x6982;&#x5FF5;&#x9707;&#x8361;&#x8D70;&#x9AD8;&#xFF0C;&#x62D3;&#x65B0;&#x836F;&#x4E1A;&#x6DA8;&#x8D85;8%&#xFF0C;&#x534E;&#x6DA6;&#x53CC;&#x9E64;&#x3001;&#x7CBE;&#x534E;&#x5236;&#x836F;&#x6DA8;&#x8D85;5%&#xFF0C;&#x8D5B;&#x4F26;&#x751F;&#x7269;&#x3001;&#x8BDA;&#x8FBE;&#x836F;&#x4E1A;&#x7B49;&#x8DDF;&#x6DA8; <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h5</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sourse-content<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>&#x6765;&#x6E90;&#xFF1A;&#x4ECA;&#x65E5;&#x5934;&#x6761;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>2022-05-25 14&#xFF1A;02<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- JQuery&#x5E93;&#x6587;&#x4EF6;&#x5F15;&#x5165; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://code.jquery.com/jquery-3.6.0.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- JS&#x6587;&#x4EF6;&#x5F15;&#x5165; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</pre><p>index.css&#x6587;&#x4EF6;</p>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector">*</span><span class="token punctuation">{</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.top</span></span> <span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color"><span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">53</span><span class="token punctuation">,</span> <span class="token number">152</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#fff</span><span class="token punctuation">;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token number">35</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">li</span> <span class="token punctuation">{</span>
    <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.tab</span></span> <span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#ccc</span><span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#FFF</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.tab</span> li</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">21</span><span class="token unit">%</span><span class="token punctuation">;</span>
    <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">60</span>PX<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">2</span><span class="token unit">%</span><span class="token punctuation">;</span>
    <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#CCC</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector"><span class="token class">.tab</span> <span class="token class">.current</span></span> <span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#000</span><span class="token punctuation">;</span>
    <span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#666</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.container</span></span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.container</span> <span class="token class">.card</span></span><span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span> <span class="token number">5</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span><span class="token number">1</span><span class="token unit">px</span> solid <span class="token hexcode color">#ccc</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.card</span> <span class="token class">.left</span></span><span class="token punctuation">{</span>
    <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.card</span> <span class="token class">.right</span></span><span class="token punctuation">{</span>
    <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">75</span><span class="token unit">%</span><span class="token punctuation">;</span>
    <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.card</span> <span class="token class">.left</span> img</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.card</span> <span class="token class">.right</span> h5</span><span class="token punctuation">{</span>
    <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">55</span><span class="token unit">px</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.card</span> <span class="token class">.sourse-content</span></span><span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#666</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><h4 class="mume-header" id="22-%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0">2.2 &#x529F;&#x80FD;&#x5B9E;&#x73B0;</h4>

<h5 class="mume-header" id="%E4%B8%80-%E5%AE%8C%E6%88%90tab%E6%A0%8F%E7%9A%84%E5%88%87%E6%8D%A2%E6%95%88%E6%9E%9C%E5%8A%9F%E8%83%BD">&#x4E00;&#x3001;&#x5B8C;&#x6210;Tab&#x680F;&#x7684;&#x5207;&#x6362;&#x6548;&#x679C;&#x529F;&#x80FD;</h5>

<pre data-role="codeBlock" data-info="js" class="language-javascript">    <span class="token comment">//&#x6DFB;&#x52A0;tab&#x680F;&#x70B9;&#x51FB;&#x4E8B;&#x4EF6;</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.tab li&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">click</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">//&#x7ED9;&#x5F53;&#x524D;&#x70B9;&#x51FB;&#x5BF9;&#x8C61;&#x6DFB;&#x52A0;&#x9009;&#x4E2D;&#x6837;&#x5F0F;&#xFF0C;&#x5176;&#x5B83;&#x79FB;&#x9664;&#x9009;&#x4E2D;&#x6837;&#x5F0F;</span>
        <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">addClass</span><span class="token punctuation">(</span><span class="token string">&quot;current&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">siblings</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">removeClass</span><span class="token punctuation">(</span><span class="token string">&quot;current&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><h5 class="mume-header" id="%E4%BA%8C-%E5%AE%9E%E7%8E%B0%E6%96%B0%E9%97%BB%E6%95%B0%E6%8D%AE%E7%9A%84%E8%AF%B7%E6%B1%82%E5%8A%9F%E8%83%BD">&#x4E8C;&#x3001;&#x5B9E;&#x73B0;&#x65B0;&#x95FB;&#x6570;&#x636E;&#x7684;&#x8BF7;&#x6C42;&#x529F;&#x80FD;</h5>

<pre data-role="codeBlock" data-info="js" class="language-javascript"> $<span class="token punctuation">.</span><span class="token method function property-access">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
   url<span class="token operator">:</span> <span class="token string">&quot;http://api.tianapi.com/topnews/index?key=7db75f0a8b9e89d93762b622eea1a8f0&quot;</span><span class="token punctuation">,</span> <span class="token comment">// &#x8BF7;&#x6C42;&#x8DEF;&#x5F84;</span>
   type<span class="token operator">:</span> <span class="token string">&quot;GET&quot;</span><span class="token punctuation">,</span> <span class="token comment">//&#x8BF7;&#x6C42;&#x65B9;&#x5F0F;</span>
   <span class="token comment">//&#x8BF7;&#x6C42;&#x6210;&#x529F;&#x4E4B;&#x540E;&#x7684;&#x56DE;&#x8C03;</span>
   <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">//&#x54CD;&#x5E94;&#x6210;&#x529F;&#x540E;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;</span>
   <span class="token comment">//&#x8868;&#x793A;&#x5982;&#x679C;&#x8BF7;&#x6C42;&#x54CD;&#x5E94;&#x51FA;&#x73B0;&#x9519;&#x8BEF;&#xFF0C;&#x4F1A;&#x6267;&#x884C;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;</span>
   <span class="token function-variable function">error</span><span class="token operator">:</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;&#x51FA;&#x9519;&#x5566;...&quot;</span><span class="token punctuation">)</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span>
   dataType<span class="token operator">:</span> <span class="token string">&quot;json&quot;</span><span class="token comment">//&#x8BBE;&#x7F6E;&#x63A5;&#x53D7;&#x5230;&#x7684;&#x54CD;&#x5E94;&#x6570;&#x636E;&#x7684;&#x683C;&#x5F0F; text &#x666E;&#x901A;&#x7684;&#x6587;&#x672C;&#x5B57;&#x7B26;&#x4E32;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><h5 class="mume-header" id="%E4%B8%89-%E5%AE%9E%E7%8E%B0%E6%8A%8A%E6%8E%A5%E5%8F%A3%E8%BF%94%E5%9B%9E%E6%9D%A5%E7%9A%84%E6%96%B0%E9%97%BB%E6%95%B0%E6%8D%AE%E6%B8%B2%E6%9F%93%E8%87%B3%E9%A1%B5%E9%9D%A2%E4%B8%8A%E7%9A%84%E6%95%88%E6%9E%9C">&#x4E09;&#x3001;&#x5B9E;&#x73B0;&#x628A;&#x63A5;&#x53E3;&#x8FD4;&#x56DE;&#x6765;&#x7684;&#x65B0;&#x95FB;&#x6570;&#x636E;&#x6E32;&#x67D3;&#x81F3;&#x9875;&#x9762;&#x4E0A;&#x7684;&#x6548;&#x679C;</h5>

<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token comment">//&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;&#x4FDD;&#x5B58;&#x9700;&#x8981;&#x62FC;&#x63A5;&#x7684;html&#x4EE3;&#x7801;</span>
<span class="token keyword keyword-var">var</span> html<span class="token operator">=</span><span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// &#x904D;&#x5386;&#x6570;&#x636E;&#x5217;&#x8868; &#x628A;&#x6BCF;&#x9879;&#x65B0;&#x95FB;&#x6570;&#x636E;&#x7EC4;&#x88C5;&#x6210;html&#x4EE3;&#x7801;</span>
$<span class="token punctuation">.</span><span class="token method function property-access">each</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token property-access">newslist</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//&#x901A;&#x8FC7;${}&#x628A;js&#x7684;&#x53D8;&#x91CF;&#x8DDF;html&#x4EE3;&#x7801;&#x62FC;&#x63A5;&#x5728;&#x4E00;&#x8D77;</span>
   html <span class="token operator">+=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
   &lt;div class=&quot;card&quot; data-url=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span><span class="token property-access">url</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;&gt;
       &lt;div class=&quot;left&quot;&gt;&lt;img src=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span><span class="token property-access">picUrl</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot; alt=&quot;&quot;&gt;&lt;/div&gt;
       &lt;div class=&quot;right&quot;&gt;
           &lt;h5&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/h5&gt;
           &lt;div class=&quot;sourse-content&quot;&gt;
               &lt;span&gt;&#x6765;&#x6E90;&#xFF1A;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span><span class="token property-access">source</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/span&gt;
               &lt;span&gt;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span><span class="token property-access">ctime</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&lt;/span&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
   </span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">//&#x6700;&#x7EC8;&#x628A;&#x65B0;&#x95FB;&#x5217;&#x8868;&#x7684;&#x5185;&#x5BB9;&#x8FFD;&#x52A0;&#x5230;&#x65B0;&#x95FB;&#x5BB9;&#x5668;&#x4E0A;</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.container&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">append</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span>
</pre><h5 class="mume-header" id="%E5%9B%9B-%E5%AE%9E%E7%8E%B0%E7%82%B9%E5%87%BB%E6%96%B0%E9%97%BB%E5%86%85%E5%AE%B9%E8%B7%B3%E8%BD%AC%E5%88%B0%E6%96%B0%E9%97%BB%E9%93%BE%E6%8E%A5%E7%9A%84%E5%8A%9F%E8%83%BD">&#x56DB;&#x3001;&#x5B9E;&#x73B0;&#x70B9;&#x51FB;&#x65B0;&#x95FB;&#x5185;&#x5BB9;&#x8DF3;&#x8F6C;&#x5230;&#x65B0;&#x95FB;&#x94FE;&#x63A5;&#x7684;&#x529F;&#x80FD;</h5>

<pre data-role="codeBlock" data-info="js" class="language-javascript">    <span class="token comment">//&#x70B9;&#x51FB;&#x5185;&#x5BB9;&#x7684;&#x65F6;&#x5019; &#x8DF3;&#x8F6C;&#x65B0;&#x95FB;&#x94FE;&#x63A5;</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">&quot;.container&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">on</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;.card&quot;</span><span class="token punctuation">,</span> <span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token dom variable">window</span><span class="token punctuation">.</span><span class="token property-access">location</span><span class="token punctuation">.</span><span class="token property-access">href</span> <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">data</span><span class="token punctuation">(</span><span class="token string">&quot;url&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre><h5 class="mume-header" id="%E4%BA%94-%E5%AE%9E%E7%8E%B0%E6%96%B0%E9%97%BB%E6%BB%9A%E5%88%B0%E5%88%B0%E6%9C%80%E5%90%8E%E4%B8%80%E6%9D%A1%E7%9A%84%E6%97%B6%E5%80%99%E5%8A%A0%E8%BD%BD%E4%B8%8B%E4%B8%80%E9%A1%B5%E6%96%B0%E9%97%BB%E7%9A%84%E5%8A%9F%E8%83%BD">&#x4E94;&#x3001;&#x5B9E;&#x73B0;&#x65B0;&#x95FB;&#x6EDA;&#x5230;&#x5230;&#x6700;&#x540E;&#x4E00;&#x6761;&#x7684;&#x65F6;&#x5019;&#x52A0;&#x8F7D;&#x4E0B;&#x4E00;&#x9875;&#x65B0;&#x95FB;&#x7684;&#x529F;&#x80FD;</h5>

<blockquote>
<p>&#x4E0D;&#x544A;&#x8BC9;&#x4F60;&#x4EE3;&#x7801;</p>
</blockquote>
<h6 class="mume-header" id="%E5%AE%8C%E6%88%90%E6%80%9D%E8%B7%AF">&#x5B8C;&#x6210;&#x601D;&#x8DEF;</h6>

<ul>
<li>&#x6839;&#x636E;&#x63A5;&#x53E3;&#x6587;&#x6863;&#x4F1A;&#x6709;&#x4E00;&#x4E2A;&#x9875;&#x7801;&#x7684;&#x53C2;&#x6570;page</li>
<li>&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;page&#x5728;&#x6ED1;&#x52A8;&#x5230;&#x5E95;&#x90E8;&#x7684;&#x65F6;&#x5019;page&#x81EA;&#x589E;&#xFF0C;&#x53D1;&#x51FA;&#x8BF7;&#x6C42;&#x4E0B;&#x4E00;&#x9875;&#x5185;&#x5BB9;</li>
<li>&#x628A;&#x8BF7;&#x6C42;&#x5230;&#x7684;&#x6570;&#x636E;&#x8FFD;&#x52A0;&#x5230;&#x65B0;&#x95FB;&#x5BB9;&#x5668;&#x4E0A;</li>
</ul>
<h6 class="mume-header" id="%E6%8F%90%E7%A4%BA">&#x63D0;&#x793A;</h6>

<p>&#x5224;&#x65AD;&#x662F;&#x5426;&#x6ED1;&#x52A8;&#x5230;&#x5E95;&#x90E8;&#x7528;&#x5230;&#x76D1;&#x542C;&#x9875;&#x9762;&#x6EDA;&#x52A8;&#x6761;&#x7684;&#x4E8B;&#x4EF6;</p>
<pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token dom variable">window</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">scroll</span><span class="token punctuation">(</span><span class="token keyword keyword-function">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// &#x5F53;&#x6EDA;&#x52A8;&#x6761;&#x4E0A;&#x65B9;&#x7684;&#x9AD8;&#x5EA6;&#x5927;&#x4E8E;&#x7B49;&#x4E8E;&#x9875;&#x9762;&#x5185;&#x5BB9;&#x7684;&#x9AD8;&#x5EA6;&#x7684;&#x65F6;&#x5019; &#x5C31;&#x4EE3;&#x8868;&#x9875;&#x9762;&#x6EDA;&#x52A8;&#x5230;&#x5E95;&#x90E8;&#x4E86;</span>
    <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token dom variable">document</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">scrollTop</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&gt;=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token dom variable">document</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token dom variable">window</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">height</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">&quot;&#x5230;&#x5E95;&#x90E8;&#x4E86;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre><h6 class="mume-header" id="%E6%B3%A8%E6%84%8F%E7%9A%84%E5%9C%B0%E6%96%B9">&#x6CE8;&#x610F;&#x7684;&#x5730;&#x65B9;</h6>

<ol>
<li>&#x6EDA;&#x52A8;&#x4E8B;&#x4EF6;&#x5230;&#x5E95;&#x90E8;&#x7684;&#x65F6;&#x5019;&#x4F1A;&#x89E6;&#x53D1;&#x5F88;&#x591A;&#x6B21;&#xFF0C;&#x4E0D;&#x4FE1;&#x4F60;&#x8BD5;&#x8BD5;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#x5982;&#x679C;&#x76F4;&#x63A5;&#x8BF7;&#x6C42;&#x7684;&#x8BDD;&#x4F1A;&#x8C03;&#x7528;&#x591A;&#x6B21;&#x8BF7;&#x6C42;&#x3002;&#x89E3;&#x51B3;&#x65B9;&#x6CD5;&#x5C31;&#x662F;&#x6DFB;&#x52A0;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;&#xFF0C;&#x5728;&#x8BF7;&#x6C42;&#x5F00;&#x59CB;&#x4E4B;&#x524D;&#x8981;&#x5224;&#x65AD;&#x662F;&#x5426;&#x6709;&#x4E00;&#x4E2A;&#x8BF7;&#x6C42;&#x4E3A;&#x5B8C;&#x6210;&#x3002;&#x5B8C;&#x6210;&#x540E;&#x624D;&#x80FD;&#x7EE7;&#x7EED;&#x53D1;&#x8D77;&#x3002;</li>
<li>&#x8BF7;&#x6C42;&#x4EE3;&#x7801;&#x7684;&#x5171;&#x7528;&#xFF0C;&#x52A0;&#x4E0A;&#x6B64;&#x5904;&#x5E94;&#x8BE5;&#x5DF2;&#x7ECF;&#x6709;&#x4E24;&#x4E2A;&#x5730;&#x65B9;&#x9700;&#x8981;&#x8C03;&#x7528;&#x8BF7;&#x6C42;&#x63A5;&#x53E3;&#x3002;&#x4E00;&#x4E2A;&#x662F;&#x4E00;&#x5F00;&#x59CB;&#x7B2C;&#x4E00;&#x9875;&#x7684;&#x3002;&#x7B2C;&#x4E8C;&#x4E2A;&#x5C31;&#x662F;&#x73B0;&#x5728;&#x5F53;&#x9875;&#x9762;&#x6EDA;&#x52A8;&#x5230;&#x5E95;&#x90E8;&#xFF0C;&#x8003;&#x8651;&#x628A;&#x8BF7;&#x6C42;&#x63A5;&#x53E3;&#x5C01;&#x88C5;&#x6210;&#x65B9;&#x6CD5;&#x3002;</li>
</ol>
<h5 class="mume-header" id="%E5%85%AD-%E5%AE%9E%E7%8E%B0%E7%82%B9%E5%87%BBtab%E5%88%87%E6%8D%A2%E4%B8%8D%E5%90%8C%E6%96%B0%E9%97%BB%E5%88%86%E7%B1%BB%E7%9A%84%E5%8A%9F%E8%83%BD">&#x516D;&#x3001;&#x5B9E;&#x73B0;&#x70B9;&#x51FB;Tab&#x5207;&#x6362;&#x4E0D;&#x540C;&#x65B0;&#x95FB;&#x5206;&#x7C7B;&#x7684;&#x529F;&#x80FD;</h5>

<blockquote>
<p>&#x8FD9;&#x6B21;&#x771F;&#x7684;&#x6CA1;&#x6709;&#x4EE3;&#x7801;</p>
</blockquote>
<h6 class="mume-header" id="%E5%AE%8C%E6%88%90%E6%80%9D%E8%B7%AF-1">&#x5B8C;&#x6210;&#x601D;&#x8DEF;</h6>

<ul>
<li>&#x4E0D;&#x540C;&#x7684;&#x65B0;&#x95FB;&#x5206;&#x7C7B;&#x4F1A;&#x6709;&#x4E0D;&#x540C;&#x7684;&#x63A5;&#x53E3;&#x5730;&#x5740;&#xFF0C;&#x4F46;&#x662F;&#x53C2;&#x6570;&#x548C;&#x8FD4;&#x56DE;&#x7684;&#x6570;&#x636E;&#x7ED3;&#x6784;&#x90FD;&#x662F;&#x76F8;&#x540C;&#x7684;</li>
<li>&#x6839;&#x636E;&#x5F53;&#x524D;&#x70B9;&#x51FB;&#x7684;Tab&#x680F;&#x5207;&#x6362;&#x5230;&#x6307;&#x5B9A;&#x7684;&#x65B0;&#x95FB;&#x5206;&#x7C7B;&#x6570;&#x636E;&#x63A5;&#x53E3;&#x3002;</li>
</ul>
<h6 class="mume-header" id="%E6%B3%A8%E6%84%8F%E7%9A%84%E5%9C%B0%E6%96%B9-1">&#x6CE8;&#x610F;&#x7684;&#x5730;&#x65B9;</h6>

<ol>
<li>&#x9700;&#x8981;&#x8003;&#x8651;&#x4EE3;&#x7801;&#x7684;&#x590D;&#x7528;&#x6027;</li>
<li>&#x9700;&#x8981;&#x8003;&#x8651;&#x9875;&#x9762;&#x5206;&#x9875;&#x53D8;&#x91CF;&#x7684;&#x91CD;&#x7F6E;</li>
<li>&#x9700;&#x8981;&#x8003;&#x8651;&#x4EE3;&#x7801;&#x7684;&#x7B80;&#x6D01;</li>
</ol>

      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>